<template>
  <div>
<table border="">
  <tr>
    <th>编号</th>
    <th>品牌名称</th>
    <th>创立时间</th>
    <th>操作</th>
  </tr>
  <tr v-show="isOk" id="isOk">
    <th colspan=4>没有数据了！</th>
  </tr>
  <tr  v-for="(item,index) in list" :key="item.id">
    <th>{{item.id}}</th>
    <th>{{item.name}}</th>
    <th>{{item.time}}</th>
    <th><button @click="fn(index)">删除</button></th>
  </tr>
</table>
  </div>
</template>

<script>
export default {
data(){
  return {
    list: [
        { id: 1, name: "奔驰", time: "2020-08-01" },
        { id: 2, name: "宝马", time: "2020-08-02" },
        { id: 3, name: "奥迪", time: "2020-08-03" },
      ]
  ,isOk:false
    }
},
methods:{
  fn(num){
     this.list.splice(num,1)
     if(this.list.length===0){
      this.isOk=true
     }
  }
}
}
</script>

<style>
table{
  width: 400px;
}
#isOk{
  text-align: center;
}
</style>